<div id="innerContainer">
    <div class="row">
        <div class="col-xs-10">
            <div class="form-body margin-top-20">
                <!--hide wifi range settings until sw implements it-->
                <form id='wifiRangeForm'>
                    <div class="form-title" data-trans="wifi_range_settings"></div>
                    <div class="content">
                        <div class="row">
                            <label class="span4 side-right" data-trans='wifi_range'></label>
                            <div class="span8">
                                <input type="radio" name="rangeGroup" id='short_mode' value="short_mode" data-bind="checked: wifiRangeMode" />
                                <label data-bind="visible: !isCPE" for='short_mode' data-trans='wifi_range_note_short1'></label>
                                <label data-bind="visible: isCPE" for='short_mode' data-trans='wifi_range_note_short1'></label>
                            </div>
                        </div>
                        <div class="row">
                            <label class="span4 side-right"></label>
                            <div class="span8">
                                <input type="radio" name="rangeGroup" id='medium_mode' value="medium_mode" data-bind="checked: wifiRangeMode" />
                                <label for='medium_mode' data-trans='wifi_medium_mode'></label>
                            </div>
                        </div>
                        <div class="row">
                            <label class="span4 side-right"></label>
                            <div class="span8">
                                <input type="radio" name="rangeGroup" id='long_mode' value="long_mode" data-bind="checked: wifiRangeMode" />
                                <label for='long_mode' data-trans='wifi_long_mode'></label>
                            </div>
                        </div>
                    </div>
                    <div class="form-buttons">
                        <input type="submit" class="btn-1 btn-primary" data-trans='apply' />
                    </div>
                    <div class="form-note">
                        <div class="notes-title">&nbsp;</div>
                        <ul class="notes-content">
                            <li data-trans="wifi_range_note_range"></li>
                            <li class="no-style">
                                <ul data-bind="visible: !isCPE">
                                    <li data-trans="wifi_range_note_short"></li>
                                    <li data-trans="wifi_range_note_medium"></li>
                                    <li data-trans="wifi_range_note_long"></li>
                                </ul>
                                <ul data-bind="visible: isCPE">
                                    <li data-trans="wifi_range_note_short_cpe"></li>
                                    <li data-trans="wifi_range_note_medium_cpe"></li>
                                    <li data-trans="wifi_range_note_long_cpe"></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </form>
                <form id="frmTsw" data-bind="visible: showTSWDiv">
                    <div class="form-body">
                        <div class="form-title" data-trans="time_sleep_wake_up"></div>
                        <div class="content">
                            <div class="row form-group">
                                <label class="span4 side-right" data-trans="tsw_settings"></label>
                                <div class="col-xs-6">
                                    <div class="row">
                                        <div class="span8">
                                            <input type="radio" name="tswGrp" id="tswEnable" data-bind="checked: openEnable" value="1" />
                                            <label for="tswEnable" data-trans="enable"></label>
                                        </div>
                                        <div class="span8">
                                            <input type="radio" name="tswGrp" id="tswDisable" data-bind="checked: openEnable" value="0" />
                                            <label for="tswDisable" data-trans="disable"></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row form-group" data-bind="visible: openEnable() == '1'">
                                <div class="span4 side-right">
                                    <span data-trans="tsw_timer_on"></span>
                                </div>
                                <div class="col-xs-9">
                                    <div>
                                        <input class="required form-control" type="text" style="width: 27px;display:inline-block;padding: 5px 4px;" name="openH" id="openH" data-bind="value: openH" min="0" max="23" maxlength="2"> :
                                        <input class="required form-control" type="text" style="width: 27px;display:inline-block;padding: 5px 4px;" name="openM" id="openM" data-bind="value: openM" min="0" max="59" maxlength="2">
                                    </div>
                                </div>
                                <div class="col-xs-9 col-md-offset-3" id="openErrorDiv"></div>
                            </div>
                            <div class="row form-group" data-bind="visible: openEnable() == '1'">
                                <div class="span4 side-right">
                                    <span data-trans="tsw_timer_off"></span>
                                </div>
                                <div class="col-xs-9">
                                    <input class="required form-control" type="text" style="width: 27px;display:inline-block;padding: 5px 4px;" name="closeH" id="closeH" data-bind="value: closeH" min="0" max="23" maxlength="2"> :
                                    <input class="required form-control" type="text" style="width: 27px;display:inline-block;padding: 5px 4px;" name="closeM" id="closeM" data-bind="value: closeM" min="0" max="59" maxlength="2">
                                </div>
                                <div class="col-xs-9 col-md-offset-3" id="closeErrorDiv"></div>
                            </div>
                        </div>
                        <div class="form-buttons">
                            <input type="submit" class="btn-1 btn-primary" data-trans="apply" />
                        </div>
                        <div class="form-note">
                            <div class="notes-title">&nbsp;</div>
                            <ul class="notes-content">
                                <li data-trans="tsw_note"></li>
                                <li data-trans="tsw_note_on"></li>
                                <li data-trans="tsw_note_off"></li>
                            </ul>
                        </div>
                    </div>
                </form>
                <form id='sleepModeForm' data-bind="visible: showSleepDiv">
                    <div class="form-title" data-trans='wifi_sleep_setting'></div>
                    <div class="content">
                        <div class="row">
                            <label class="span4 side-right" for='mode' data-trans='sleep_time'></label>
                            <div class="span8">
                                <select data-transid='sleep_mode' id="mode" data-bind="options: modes, value: selectedMode, optionsText: transOption('sleep_mode'), optionsValue: 'value'" class="form-control"></select>
                            </div>
                        </div>
                    </div>
                    <div class="form-buttons">
                        <input type="submit" class="btn-1 btn-primary" data-trans='apply' />
                    </div>
                    <div class="form-note">
                        <div class="notes-title">&nbsp;</div>
                        <ul class="notes-content">
                            <li data-trans="wifi_sleep_note_info"></li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $(function() {
        var service = window._service;
        var config = service.config;

        var sleepModes = _.map(config.SLEEP_MODES, function(item) {
            return new Option(item.name, item.value);
        });

        /**
         * sleepmode VM
         * @class SleepModeVM
         */
        function SleepModeVM() {
            var self = this;
            var info = getSleepMode();
            self.isCPE = config.PRODUCT_TYPE == 'CPE';
            self.showTSWDiv = config.TSW_SUPPORT;
            self.showSleepDiv = config.WIFI_SLEEP_SUPPORT;
            self.hasUssd = config.HAS_USSD;
            self.hasUpdateCheck = config.HAS_UPDATE_CHECK;
            self.hasDdns = config.DDNS_SUPPORT;
            self.hasProbe = config.HAS_PROBE;

            self.modes = ko.observableArray(sleepModes);
            self.selectedMode = ko.observable(info.sleepMode);

            var wifiRangeInfo = getWifiRange();

            self.wifiRangeMode = ko.observable(wifiRangeInfo.wifiRangeMode);

            /**
             * 设置wifi休眠模式
             * @method setSleepMode
             */
            self.setSleepMode = function() {
                showLoading('waiting');
                service.getWpsInfo({}, function(info) {
                    if (info.radioFlag == '0') {
                        showAlert('wps_wifi_off');
                    } else if (info.wpsFlag == '1') {
                        showAlert('wps_on_info');
                    } else {
                        self.setSleepModeAct();
                    }
                });
            };

            self.setSleepModeAct = function() {
                var params = {};
                params.sleepMode = self.selectedMode();
                service.setSleepMode(params, function(result) {
                    if (result.result == "success") {
                        successOverlay();
                    } else {
                        errorOverlay();
                    }
                });
            };

            /**
             * 设置wifi覆盖范围
             * @method setWifiRange
             */
            self.setWifiRange = function() {
                service.getWpsInfo({}, function(info) {
                    if (info.radioFlag == '0') {
                        showAlert('wps_wifi_off');
                    } else if (info.wpsFlag == '1') {
                        showAlert('wps_on_info');
                    } else {
                        showConfirm('', 'wifi_sleep_confirm', function() {
                            showLoading('waiting');
                            self.setWifiRangeAct();
                        });

                    }
                });
            };

            self.setWifiRangeAct = function() {
                var params = {};
                params.wifiRangeMode = self.wifiRangeMode();
                service.setWifiRange(params, function(result) {
                    if (result.result == "success") {
                        successOverlay();
                    } else {
                        errorOverlay();
                    }
                });
            };

            var tsw = service.getTsw();
            self.openEnable = ko.observable(tsw.openEnable == "" ? '0' : tsw.openEnable);
            self.openH = ko.observable(tsw.openH);
            self.openM = ko.observable(tsw.openM);
            self.closeH = ko.observable(tsw.closeH);
            self.closeM = ko.observable(tsw.closeM);
            /**
             * 设置wifi定时休眠唤醒
             * @method saveTsw
             */
            self.saveTsw = function() {
                if (self.openEnable() == '1') {
                    if (Math.abs((self.openH() * 60 + parseInt(self.openM(), 10)) - (self.closeH() * 60 + parseInt(self.closeM(), 10))) < 10) {
                        showAlert('tsw_time_interval_alert');
                        return false;
                    }
                    showLoading('waiting');
                    service.saveTsw({
                        openEnable: self.openEnable(),
                        closeEnable: self.openEnable(),
                        openTime: leftInsert(self.openH(), 2, '0') + ':' + leftInsert(self.openM(), 2, '0'),
                        closeTime: leftInsert(self.closeH(), 2, '0') + ':' + leftInsert(self.closeM(), 2, '0')
                    }, function(data) {
                        if (data && data.result == "success") {
                            successOverlay();
                        } else {
                            errorOverlay();
                        }
                    }, $.noop);
                } else {
                    showLoading('waiting');
                    service.saveTsw({
                        openEnable: self.openEnable(),
                        closeEnable: self.openEnable()
                    }, function(data) {
                        if (data && data.result == "success") {
                            successOverlay();
                        } else {
                            errorOverlay();
                        }
                    }, $.noop);
                }

            };

        }

        /**
         * 获取wifi覆盖范围信息
         * @method getWifiRange
         */
        function getWifiRange() {
            return service.getWifiRange();
        }

        /**
         * 获取wifi休眠模式
         * @method getSleepInfo
         */
        function getSleepMode() {
            return service.getSleepMode();
        }

        /**
         * 初始化sleep mode view model
         * @method init
         */
        function init() {
            var container = $('#innerContainer');
            ko.cleanNode(container[0]);
            var vm = new SleepModeVM();
            ko.applyBindings(vm, container[0]);
            $('#sleepModeForm').validate({
                submitHandler: function() {
                    vm.setSleepMode();
                }
            });

            $('#wifiRangeForm').validate({
                submitHandler: function() {
                    vm.setWifiRange();
                }
            });

            $('#frmTsw').validate({
                submitHandler: function() {
                    vm.saveTsw();
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "openH" || element.attr("name") == "openM") {
                        $("#openErrorDiv").html(error);
                    } else if (element.attr("name") == "closeH" || element.attr("name") == "closeM") {
                        $("#closeErrorDiv").html(error);
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        }

        init();
        $('#innerContainer').translate();
    })
</script>